import { Component, OnInit } from '@angular/core';
import { QkNoticeComponent } from './qknotice.component';
import { MdlDialogService, MdlDialogReference, MdlSnackbarService } from '@angular-mdl/core';
@Component({
    selector: 'qk-notice-icon',
    template: `
        <span class="ripple" [mdl-badge]="messageCount" *ngIf="(messageCount>0)" mdl-badge-overlap class="fa fa-envelope-o message" aria-hidden="true" (click)="showNotice($event)"></span>
        <span class="ripple" *ngIf="(messageCount==0)" mdl-badge-overlap class="fa fa-envelope-o message" aria-hidden="true" (click)="showNotice($event)"></span>
  `,
    styles: [`
        .message{
            font-size:30px;
            margin-left:30px;
            margin-top:10px;
            cursor: pointer; 
        }
  `]
})
export class QkNoticeIconComponent implements OnInit {
    messageCount: Number = 2;
    constructor(private dialogService: MdlDialogService) { }

    ngOnInit() {
    }

    /** 查看消息公告 */
    public showNotice($event: MouseEvent) {
        let pDialog = this.dialogService.showCustomDialog({
            component: QkNoticeComponent,
            //providers: [{provide: TEST_VALUE, useValue: 'Just an example'}],
            isModal: true,
            styles: {
                'width': '90%',
                'height': '85%',
                'padding': '0px'
            },
            clickOutsideToClose: true,
            openFrom: $event,
            enterTransitionDuration: 400,
            leaveTransitionDuration: 400
        });
        pDialog.subscribe((dialogReference: MdlDialogReference) => {
            console.log('dialog visible', dialogReference);

            dialogReference.onHide().subscribe((data: any) => {
                console.log("Method called from system component...")
                console.log(data)
            })
        });
    }
}
